```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thymeleaf 模板引擎完全指南 | 技术小馆</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        :root {
            --primary: #4f46e5;
            --primary-light: #6366f1;
            --secondary: #10b981;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --gray-light: #e2e8f0;
        }
        
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Hiragino Sans GB", Simsun, sans-serif;
            color: var(--dark);
            line-height: 1.6;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        
        .hero {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
        }
        
        .code-block {
            background-color: #f8f8f8;
            border-radius: 8px;
            padding: 1.5rem;
            position: relative;
            overflow: hidden;
        }
        
        .code-block pre {
            margin: 0;
            overflow-x: auto;
        }
        
        .code-block .lang {
            position: absolute;
            top: 0;
            right: 0;
            background-color: var(--primary);
            color: white;
            padding: 0.25rem 0.75rem;
            font-size: 0.75rem;
            border-bottom-left-radius: 4px;
        }
        
        .feature-card {
            transition: all 0.3s ease;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        .divider {
            position: relative;
            height: 1px;
            background-color: var(--gray-light);
            margin: 3rem 0;
        }
        
        .divider:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 2px;
            background-color: var(--primary);
        }
        
        .section-title {
            position: relative;
            padding-left: 1.5rem;
        }
        
        .section-title:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.5em;
            height: 1.5em;
            width: 5px;
            background-color: var(--primary);
            border-radius: 3px;
        }
        
        .nav-link {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .nav-link:hover {
            color: var(--primary);
        }
        
        .nav-link:after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary);
            transition: width 0.3s ease;
        }
        
        .nav-link:hover:after {
            width: 100%;
        }
        
        .table-container {
            overflow-x: auto;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        table th {
            background-color: var(--primary);
            color: white;
            padding: 0.75rem;
            text-align: left;
        }
        
        table td {
            padding: 0.75rem;
            border-bottom: 1px solid var(--gray-light);
        }
        
        table tr:nth-child(even) {
            background-color: #f9fafb;
        }
        
        .mermaid {
            background-color: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        
        .scroll-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 50px;
            height: 50px;
            background-color: var(--primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .scroll-top.active {
            opacity: 1;
            visibility: visible;
        }
        
        .scroll-top:hover {
            background-color: var(--primary-light);
            transform: translateY(-3px);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero text-white py-20">
        <div class="container mx-auto px-6 max-w-6xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6">Thymeleaf 模板引擎完全指南</h1>
                    <p class="text-xl mb-8 opacity-90">现代化、优雅的Java模板引擎，完美替代JSP</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="https://www.thymeleaf.org/index.html" target="_blank" class="bg-white text-primary px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition-all">
                            访问官网 <i class="fas fa-external-link-alt ml-2"></i>
                        </a>
                        <a href="#why-learn" class="border-2 border-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition-all">
                            开始学习 <i class="fas fa-arrow-down ml-2"></i>
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="code-block bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-6">
                        <div class="lang">HTML</div>
                        <pre class="text-gray-100"><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th th:text="#{msgs.headers.name}"&gt;Name&lt;/th&gt;
      &lt;th th:text="#{msgs.headers.price}"&gt;Price&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr th:each="prod: ${allProducts}"&gt;
      &lt;td th:text="${prod.name}"&gt;Oranges&lt;/td&gt;
      &lt;td th:text="${#numbers.formatDecimal(prod.price, 1, 2)}"&gt;0.99&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Navigation -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-6 py-4 max-w-6xl">
            <div class="flex justify-between">
                <div class="flex space-x-8">
                    <a href="#why-learn" class="nav-link text-gray-700">为何学习</a>
                    <a href="#intro" class="nav-link text-gray-700">简介</a>
                    <a href="#features" class="nav-link text-gray-700">特点</a>
                    <a href="#setup" class="nav-link text-gray-700">环境搭建</a>
                    <a href="#expressions" class="nav-link text-gray-700">表达式语法</a>
                    <a href="#builtins" class="nav-link text-gray-700">内置对象与方法</a>
                </div>
                <div class="flex items-center">
                    <a href="#" class="text-primary font-medium">
                        <i class="fas fa-home mr-2"></i> 返回顶部
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main class="container mx-auto px-6 py-12 max-w-6xl">
        <!-- Why Learn Section -->
        <section id="why-learn" class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8">为什么要学习 Thymeleaf</h2>
            <div class="bg-white rounded-xl shadow-sm p-8 mb-8">
                <p class="text-lg mb-6">之前我们使用的视图技术都是JSP，<strong class="text-primary">JSP 里面可以写一堆Java 逻辑</strong>，因此JSP的本质上还是Java。</p>
                <p class="text-lg mb-6"><strong class="text-primary">前端框架本质上还是 HTML ,JS , CSS 。只要 HTML ,JS , CSS 理论上，能实现所有的页面效果。</strong></p>
                <p class="text-lg mb-6"><strong class="text-primary">所以在前端页面的开发过程出现了Java代码，这样会使前端的同事头疼，因为他们不懂Java技术，而且在前端页面中出现Java代码也不符合规则。所以要更好的做到前后端分开，前端同事写前端的代码，后端同事写Java代码，这也就是JSP过时的原因了。</strong></p>
                <p class="text-lg">Thymeleaf<strong class="text-gray-600">起来更优雅，标签更像前端框架的习惯，而且是符合 XML 标准的子集，非侵入式（直接用浏览器打开 Thymeleaf 的 html 文件本身，可读性和样式也不会差太多）</strong></p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-4 text-primary">Thymeleaf 优势</h3>
                        <ul class="space-y-3">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
                                <span>更优雅的模板语法，符合前端开发习惯</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
                                <span>直接通过浏览器打开，可读性好</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
                                <span>完美支持Spring Boot生态</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-secondary mr-2 mt-1"></i>
                                <span>强大的内置表达式和工具方法</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-4 text-primary">Thymeleaf vs JSP</h3>
                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>特性</th>
                                        <th>Thymeleaf</th>
                                        <th>JSP</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>浏览器直接打开</td>
                                        <td><i class="fas fa-check text-green-500"></i></td>
                                        <td><i class="fas fa-times text-red-500"></i></td>
                                    </tr>
                                    <tr>
                                        <td>前后端分离</td>
                                        <td><i class="fas fa-check text-green-500"></i></td>
                                        <td><i class="fas fa-times text-red-500"></i></td>
                                    </tr>
                                    <tr>
                                        <td>文件后缀</td>
                                        <td>.html</td>
                                        <td>.jsp</td>
                                    </tr>
                                    <tr>
                                        <td>Spring Boot支持</td>
                                        <td><i class="fas fa-check text-green-500"></i></td>
                                        <td><i class="fas fa-check text-green-500"></i></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Introduction Section -->
        <section id="intro" class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8">Thymeleaf 简介</h2>
            <div class="bg-white rounded-xl shadow-sm p-8">
                <p class="text-lg mb-6"><strong class="text-gray-600">Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。它与 JSP，Velocity，FreeMaker 等模板引擎类似，也可以轻易地与 Spring MVC 等 Web 框架集成。与其它模板引擎相比，Thymeleaf 最大的特点是，即使不启动 Web 应用，也可以直接在浏览器中打开并正确显示模板页面。</strong></p>
                
                <div class="divider"></div>
                
                <h3 class="text-2xl font-bold mb-6">核心概念</h3>
                <div class="mermaid mb-8">
                    graph TD
                        A[Thymeleaf] --> B[模板引擎]
                        A --> C[Spring集成]
                        A --> D[动静结合]
                        B --> E[HTML5/XML/XHTML]
                        C --> F[Spring MVC]
                        C --> G[Spring Boot]
                        D --> H[静态预览]
                        D --> I[动态渲染]
                </div>
            </div>
        </section>

        <!-- Features Section -->
        <section id="features" class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8">Thymeleaf 的特点</h2>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="feature-card bg-white">
                    <div class="p-6">
                        <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-sync-alt text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">动静结合</h3>
                        <p class="text-gray-600"><strong class="text-gray-600">Thymeleaf 既可以直接使用浏览器打开，查看页面的静态效果，也可以通过 Web 应用程序进行访问，查看动态页面效果。</strong></p>
                    </div>
                </div>
                <div class="feature-card bg-white">
                    <div class="p-6">
                        <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-box-open text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">开箱即用</h3>
                        <p class="text-gray-600"><strong class="text-gray-600">Thymeleaf 提供了 Spring 标准方言以及一个与 SpringMVC 完美集成的可选模块，可以快速地实现表单绑定、属性编辑器、国际化等功能。</strong></p>
                    </div>
                </div>
                <div class="feature-card bg-white">
                    <div class="p-6">
                        <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-language text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">多方言支持</h3>
                        <p class="text-gray-600"><strong class="text-gray-600">它提供了 Thymeleaf 标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL 表达式；必要时，开发人员也可以扩展和创建自定义的方言。</strong></p>
                    </div>
                </div>
                <div class="feature-card bg-white">
                    <div class="p-6">
                        <div class="w-12 h-12 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mb-4">
                            <i class="fas fa-leaf text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-3">与 SpringBoot 完美整合</h3>
                        <p class="text-gray-600"><strong class="text-gray-600">SpringBoot 为 Thymeleaf 提供了的默认配置，并且还为 Thymeleaf 设置了视图解析器，因此 Thymeleaf 可以与 Spring Boot 完美整合。</strong></p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-sm p-8 mt-8">
                <p class="text-lg"><strong class="text-gray-600">Thymeleaf 通过在 html 标签中，增加额外属性来达到"模板+数据"的展示方式</strong></p>
            </div>
        </section>

        <!-- Setup Section -->
        <section id="setup" class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8">环境搭建</h2>
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <div class="p-6 border-b border-gray-200">
                    <h3 class="text-xl font-bold mb-4">1、导入依赖</h3>
                    <div class="code-block">
                        <div class="lang">XML</div>
                        <pre><code>&lt;dependency&gt;
    &lt;groupId&gt;org.thymeleaf&lt;/groupId&gt;
    &lt;artifactId&gt;thymeleaf&lt;/artifactId&gt;
    &lt;version&gt;3.0.15.RELEASE&lt;/version&gt;
&lt;/dependency&gt;</code></pre>
                    </div>
                </div>
                <div class="p-6 border-b border-gray-200">
                    <h3 class="text-xl font-bold mb-4">2、thymeleaf初始化</h3>
                    <div class="code-block">
                        <div class="lang">Java</div>
                        <pre><code>@WebListener
public class ThymeleafListener implements ServletContextListener {

    private static final String TEMPLATE_ENGINE_INST = "com.ts.thymeleaf.TemplateEngine";

    // 从上下文的域对象中获取模板引擎对象
    public static TemplateEngine getTemplateEngine(ServletContext context) {
        return (TemplateEngine) context.getAttribute(TEMPLATE_ENGINE_INST);
    }

    public void contextInitialized(ServletContextEvent sce) {

        // 1、获取上下文域对象
        ServletContext servletContext = sce.getServletContext();

        // 2.创建一个模板解析对象，用来设置解析模板的属性
        ServletContextTemplateResolver templateResolver =
                new ServletContextTemplateResolver(servletContext);
        templateResolver.setTemplateMode(TemplateMode.HTML); // 设置HTML模式
        templateResolver.setPrefix("/WEB-INF/templates/"); // 视图模板的前缀
        templateResolver.setSuffix(".html"); // 视图模板后缀
        templateResolver.setCacheable(false); // 是否开启缓存
        templateResolver.setCharacterEncoding("utf8"); // 设置编码

        // 3.创建一个模板引擎对象,用来做视图的解析
        TemplateEngine engine = new TemplateEngine();
        engine.setTemplateResolver(templateResolver);

        // 4、把模板引擎对象放到上下文的域对象中，方便获取
        servletContext.setAttribute(TEMPLATE_ENGINE_INST, engine);
    }

    public void contextDestroyed(ServletContextEvent sce) {
    }
}</code></pre>
                    </div>
                </div>
                <div class="p-6 border-b border-gray-200">
                    <h3 class="text-xl font-bold mb-4">3、返回视图</h3>
                    <div class="code-block">
                        <div class="lang">Java</div>
                        <pre><code>@WebServlet("/HelloServlet")
public class HelloServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8"); // 解决视图乱码问题
        // 1.获取模板引擎对象
        TemplateEngine engine = ThymeleafListener.getTemplateEngine(request.getServletContext());

        // 2.创建一个域对象
        WebContext context = new WebContext(request, response, request.getServletContext());

        // 3.设置视图的数据
        context.setVariable("msg", "Hello thymeleaf 中文");
        Map&lt;String, Object&gt; map = new HashMap&lt;&gt;();
        map.put("age", 20);
        context.setVariables(map);
        
        // 给作用域设置数据
        request.getSession().setAttribute("sex","女");

        // 4.设置跳转的视图名称(index),模板引擎胡自动添加视图的前缀和后缀
        engine.process("index", context, response.getWriter());
    }
}</code></pre>
                    </div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-bold mb-4">4、视图模板</h3>
                    <div class="code-block">
                        <div class="lang">HTML</div>
                        <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en" xmlns:th="http://www.thymeleaf.org/"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;base th:href="${#servletContext.getContextPath()+'/'}"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;span th:text="${msg}"&gt;Hello Wolrd&lt;/span&gt;&lt;br&gt;
&lt;span th:text="${age}"&gt;Hello Wolrd&lt;/span&gt;&lt;br&gt;
&lt;span th:text="${session.sex}"&gt;Hello Wolrd&lt;/span&gt;&lt;br&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- Expressions Section -->
        <section id="expressions" class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8">标准表达式语法</h2>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-xl font-bold mb-4 text-primary">${...} 变量表达式</h3>
                    <p class="mb-4"><strong class="text-gray-600">不管是静态资源的引用，form表单的请求，凡是链接都可以用 @{...} 。这样可以动态获取项目路径，即便项目名变了，依然可以正常访问</strong></p>
                    <div class="code-block">
                        <div class="lang">Thymeleaf</div>
                        <pre><code>&lt;span th:text="${user.name}"&gt;Default Name&lt;/span&gt;
&lt;div th:object="${user}"&gt;
    &lt;p th:text="*{firstName}"&gt;First Name&lt;/p&gt;
    &lt;p th:text="*{lastName}"&gt;Last Name&lt;/p&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-xl font-bold mb-4 text-primary">@{...} 链接表达式</h3>
                    <p class="mb-4"><strong class="text-gray-600">变量表达式有丰富的内置方法，使其更强大，更方便</strong></p>
                    <div class="code-block">
                        <div class="lang">Thymeleaf</div>
                        <pre><code>&lt;a th:href="@{/user/{id}/profile(id=${user.id})}"&gt;Profile&lt;/a&gt;
&lt;script th:src="@{/js/main.js}"&gt;&lt;/script&gt;
&lt;link th:href="@{/css/style.css}" rel="stylesheet"&gt;</code></pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- Built-ins Section -->
        <section id="builtins" class="mb-16">
            <h2 class="section-title text-3xl font-bold mb-8">内置对象与方法</h2>
            
            <div class="bg-white rounded-xl shadow-sm p-8 mb-8">
                <h3 class="text-2xl font-bold mb-6">内置对象</h3>
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>对象</th>
                                <th>描述</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>ctx</strong></td>
                                <td>上下文对象</td>
                            </tr>
                            <tr>
                                <td><strong>vars</strong></td>
                                <td>上下文变量</td>
                            </tr>
                            <tr>
                                <td><strong>locale</strong></td>
                                <td>上下文的语言环境</td>
                            </tr>
                            <tr>
                                <td><strong>request</strong></td>
                                <td>（仅在web上下文）的 HttpServletRequest 对象</td>
                            </tr>
                            <tr>
                                <td><strong>response</strong></td>
                                <td>（仅在web上下文）的 HttpServletResponse 对象</td>
                            </tr>
                            <tr>
                                <td><strong>session</strong></td>
                                <td>（仅在web上下文）的 HttpSession 对象</td>
                            </tr>
                            <tr>
                                <td><strong>servletContext</strong></td>
                                <td>（仅在web上下文）的 ServletContext 对象</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-8">
                <h3 class="text-2xl font-bold mb-6">内置方法</h3>
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>方法</th>
                                <th>描述</th>
                                <th>示例</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>strings</strong></td>
                                <td>字符串格式化方法，常用的Java方法它都有</td>
                                <td>equals, length, trim, toUpperCase等</td>
                            </tr>
                            <tr>
                                <td><strong>numbers</strong></td>
                                <td>数值格式化方法</td>
                                <td>formatDecimal等</td>
                            </tr>
                            <tr>
                                <td><strong>bools</strong></td>
                                <td>布尔方法</td>
                                <td>isTrue，isFalse等</td>
                            </tr>
                            <tr>
                                <td><strong>arrays</strong></td>
                                <td>数组方法</td>
                                <td>toArray，length，isEmpty等</td>
                            </tr>
                            <tr>
                                <td><strong>lists</strong>, <strong>sets</strong></td>
                                <td>集合方法</td>
                                <td>toList，size，contains等</td>
                            </tr>
                            <tr>
                                <td><strong>maps</strong></td>
                                <td>对象方法</td>
                                <td>size，isEmpty，containsKey等</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-6 max-w-6xl text-center">
            <h3 class="text-2xl font-bold mb-4">技术小馆</h3>
            <p class="mb-6">探索技术世界的知识殿堂</p>
            <div class="flex justify-center space-x-4">
                <a href="http://www.yuque.com/jtostring" target="_blank" class="text-gray-300 hover:text-white transition-colors">
                    <i class="fas fa-globe mr-2"></i> www.yuque.com/jtostring
                </a>
            </div>
        </div>
    </footer>

    <!-- Scroll to Top Button -->
    <div class="scroll-top">
        <i class="fas fa-arrow-up"></i>
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Scroll to top button
        const scrollTopBtn = document.querySelector('.scroll-top');
        
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                scrollTopBtn.classList.add('active');
            } else {
                scrollTopBtn.classList.remove('active');
            }
        });
        
        scrollTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```